import React, { Component } from 'react'
import { Table, Divider, Button, Popconfirm, message, Input, Modal } from 'antd'
import axios from 'axios'
import store from '../store2'
import { INIT_LIST, DEL_ITEM, SERAC_LIST, ADD_ITEM, CHANGE_ITEM } from '../store2/actions/list'

const { Search } = Input;

function confirm(index) {
    store.dispatch({ type: DEL_ITEM, index })
    message.success('删除成功');
}

function cancel(e) {
    message.error('取消删除');
}


// react-redux

export default class Crud extends Component {
    constructor() {
        super()
    }
    state = {
        columns: [
            {
                // 表头的名称   
                title: 'Name',
                // 配置data数据中的key
                dataIndex: 'name',
                // 唯一值   
                key: 'name',
                // 视图的渲染 
                // render(当前的值, 当前列的值, 下标)  
                // 如果没有render, 默认渲染没有标签的值
                render: (text, row, index) => {
                    return <a>
                        {text}
                    </a>
                }
            },
            {
                title: 'Age',
                dataIndex: 'age',
                key: 'age',
            },
            {
                title: 'Address',
                dataIndex: 'address',
                key: 'address',
            },
            {
                title: 'Action',
                key: 'action',
                render: (text, record, index) => (
                    <span>
                        <Button onClick={() => {
                            this.setState({
                                visibleEdit: true,
                                // 对编辑弹框赋值
                                editForm: record
                            })
                        }} type="primary">编辑</Button>
                        <Divider type="vertical" />
                        <Popconfirm
                            title="确定要删除嘛？"
                            onConfirm={() => {
                                confirm(index)
                            }}
                            onCancel={cancel}
                            okText="Yes"
                            cancelText="No"
                        >
                            <Button type="primary" danger>删除</Button>
                        </Popconfirm>
                    </span>
                ),
            }
        ],
        val: "",
        // 控制编辑弹框的显示隐藏
        visibleEdit: false,
        // 控制新增弹框
        visible: false,
        // 新增弹框的val
        form: {
            name: '',
            age: null,
            address: ''
        },
        // 编辑弹框数据
        editForm: {}
    }
    showModal = () => {
        this.setState({
            visible: true,
        });
    };

    handleOk = e => {
        this.state.form.key = String(new Date().getTime()).slice(4, 6)
        store.dispatch({
            type: ADD_ITEM,
            item: this.state.form
        })
        this.setState({
            visible: false,
            form: {}
        });
    };

    handleCancel = e => {
        console.log(e);
        this.setState({
            visible: false,
        });
    };

    // 编辑弹框确定
    handleEditOk = () => {

        store.dispatch({ type: CHANGE_ITEM, editItem: this.state.editForm })
        this.setState({
            visibleEdit: false,
        });
    }
    // 编辑弹框取消
    handleEditCancel = () => {
        this.setState({
            visibleEdit: false,
        });
    }
    render() {
        const { val, form, columns, visibleEdit, editForm } = this.state
        return (
            <div>
                {/* 编辑弹框 */}
                <Modal
                    title="编辑弹框"
                    visible={visibleEdit}
                    onOk={this.handleEditOk}
                    onCancel={this.handleEditCancel}
                >
                    <p>
                        <Input value={editForm.name} onChange={(ev) => {
                            let editForm = JSON.parse(JSON.stringify(this.state.editForm))
                            editForm.name = ev.target.value
                            this.setState({
                                editForm
                            })
                        }} placeholder="名称" />
                    </p>
                    <p>
                        <Input value={editForm.age} onChange={(ev) => {
                             let editForm = JSON.parse(JSON.stringify(this.state.editForm))
                             editForm.age = ev.target.value
                             this.setState({
                                 editForm
                             })
                        }} placeholder="年龄" />
                    </p>
                    <p>
                        <Input value={editForm.address} onChange={(ev) => {
                            let editForm = JSON.parse(JSON.stringify(this.state.editForm))
                            editForm.address = ev.target.value
                            this.setState({
                                editForm
                            })
                        }} placeholder="地址" />
                    </p>
                </Modal>


                {/* 新增 */}
                <Button type="primary" onClick={this.showModal}>
                    Open Modal
                </Button>
                <Modal
                    title="Basic Modal"
                    visible={this.state.visible}
                    onOk={this.handleOk}
                    onCancel={this.handleCancel}
                >
                    <p>
                        <Input value={form.name} onChange={(ev) => {
                            let form = JSON.parse(JSON.stringify(this.state.form))
                            form.name = ev.target.value
                            this.setState({
                                form
                            })
                        }} placeholder="名称" />
                    </p>
                    <p>
                        <Input value={form.age} onChange={(ev) => {
                            let form = JSON.parse(JSON.stringify(this.state.form))
                            form.age = ev.target.value
                            this.setState({
                                form
                            })
                        }} placeholder="年龄" />
                    </p>
                    <p>
                        <Input value={form.address} onChange={(ev) => {
                            let form = JSON.parse(JSON.stringify(this.state.form))
                            form.address = ev.target.value
                            this.setState({
                                form
                            })
                        }} placeholder="地址" />
                    </p>
                </Modal>
                {/* 搜索 */}
                <Search value={val} onChange={(ev) => {
                    this.setState({
                        val: ev.target.value
                    })
                }} onSearch={value => {
                    store.dispatch({ type: SERAC_LIST, value })
                }} enterButton />
                {/* 表格 */}
                <Table columns={columns} dataSource={store.getState().list} />
            </div>
        )
    }
    componentDidMount() {
        this.init()
    }
    init() {
        store.dispatch((next) => {
            axios.get('/api/getList').then(res => {
                // console.log(res.data)
                next({ type: INIT_LIST, res: res.data })
            })
        })
    }
}
